/**
 * 声明了两个组件，blog-article-list和blog-article-item
 *
 * blog-article-item是blog-article-list的子组件（后者调用前者）
 */


const blogArticleItem = {
    // 声明blog-article-item接受一个prop（参数）为articleInfo，应该包含title,abstract,cover和created_at属性
    props: ['articleInfo'],
    // 定义组件HTML模板
    template: `
    <el-card :header="articleInfo.title">
        <img :src="imgURL" class="article-card-image">
        <div style="padding: 14px;">
            <article>{{articleInfo.abstract}}</article>
            <p class="article-date">作者: {{articleInfo.username}}</p>
            <p class="article-date">创建于: {{articleInfo.created_at | formatDate}}</p>
        </div>
    </el-card>
    `,
    // Vue过滤器
    filters: {
        // 对标准时间格式进行自定义格式化
        formatDate(input) {
            return new Date(input).format('yyyy-MM-dd')
        }
    },
    computed: {
        // Vue计算属性，获取文章的头部大图URL，如果传入的articleInfo里的cover没有 就默认用一张汉堡包的图
        imgURL() {
            // 逻辑短路写法
            return this.articleInfo.cover || 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
        }
    }
}

const blogArticleList = {
    // 声明blog-article-list接受一个prop（参数）为articleListInfo，应该包含list和size属性
    props: ['articleListInfo'],
    // 局部注册的写法，在组件blog-article-list中局部注册组件blog-article-item
    // components: {
    //   blogArticleItem
    // },
    // 组件html模板
    template: `
    <div style="max-width: 640px">
        <ul class="article-list">
            <li v-for="item in articleListInfo.list">
                <blog-article-item style="cursor:pointer" @click.native="viewArticle(item.id,item.aid)"  :article-info="item"></blog-article-item>
            </li>
        </ul>
        <div style="text-align: center"><el-button v-if="!isIndex()" type="primary" @click="$emit('edit-article')">发表文章</el-button></div>
        <div style="text-align: center">
            <el-pagination
                    layout="prev, pager, next"
                    :total="articleListInfo.total"
                    :page-size="10"
                    @current-change="pageChange"
            >
            </el-pagination>
        </div>
    </div>
    `,
    methods: {
        // 文章分页器选中的页码改变时触发的函数
        pageChange(page) {
            // 关键词：Vue组件 - 事件
            // 由于article-list-item组件只负责视图渲染，不负责具体的和后端交互逻辑，因此通过事件的形式通知父组件
            // 提交一个名为page-change的事件，并附带参数page（当前分页器的页码）
            this.$emit('page-change', page)
        },
        viewArticle(id,aid) {
            location.href = `/article.html?id=${id}&&aid=${aid}`
        },
        isIndex() {
            return location.pathname == "/index.html"
        }
    }
}

// 全局注册Vue组件
Vue.component('blog-article-item', blogArticleItem)
Vue.component('blog-article-list', blogArticleList)